<template>
  <div class="app-container">
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form" :inline="true" label-width="130px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model="params.username" placeholder="请输入姓名" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号">
              <el-input v-model.number="params.userpone" placeholder="请输入手机号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份选择">
              <el-select v-model="params.larvelid" clearable>
                <el-option
                  v-for="item in StatusOption"
                  :key="item.id"
                  :label="item.level_name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button style="margin-left:60px" type="primary" @click="searchFn">查询</el-button>
            <!-- <el-button
              type="primary"
              @click="excelEvent"
              v-if="
                permissionJson.indexOf(
                  'AdminUserServerRewardProvider.exportServerPoint'
                ) != -1
              "
            >导出</el-button>-->
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- table -->
    <div class="table" v-loading="tableLoading">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          fixed="left"
          align="center"
          :index="table_index"
          width="50"
        ></el-table-column>
        <el-table-column prop="realname" align="center" label="姓名">
          <template slot-scope="scope">{{ scope.row.realname||scope.row.nick_name }}
          </template>
        </el-table-column>
        <el-table-column prop="phone" align="center" label="手机号"></el-table-column>
        <el-table-column prop="level_name" align="center" label="身份"></el-table-column>
        <el-table-column prop="month_achievement" align="center" label="当月业绩"></el-table-column>
        <el-table-column prop="all_achievement" align="center" label="累计业绩"></el-table-column>
        <el-table-column prop="month_commission" align="center" label="当月预计佣金"></el-table-column>
        <el-table-column prop="all_commission" align="center" label="累计佣金"></el-table-column>
        <el-table-column prop="commission" align="center" label="可提现余额">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="
                toRoutes(
                  'withdrawableBalanceInfo',
                  scope.row,
                )
              "
            >{{ scope.row.commission }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagesCon">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page_totals"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { partnerList ,partnerlevel} from "@/api/SponsorPartner";

export default {
  name: "SponsorPartnerAccountManagement",
  data() {
    return {
      // loading层
      tableLoading: false,
      permissionJson: JSON.parse(localStorage.getItem("permissionJson")),
      //提交数据
      params: {
        username: "",
        userpone: null,
        larvelid: null,
        page: 1,
        pageSize: 10,
      },
      //table表数据
      tableData: [],
      //总条目数
      page_totals: 60,
      //身份选择下拉框 含发起人、联合发起人、城市合伙人
      StatusOption: [
        // { id: "0", name: "全部" },
        // { id: "1", name: "发起人" },
        // { id: "2", name: "联合发起人" },
        // { id: "3", name: "城市合伙人" },
      ],
    };
  },
  inject: ["reload"],
  mounted() {
    this.getList(this.params);
    this.getPartnerlevel()
  },
  methods: {
    gojum(datas, amountType) {
      //列表页面
      //跳转到积分页面
      //type =1 金币 =2银币
      let type = 1;
      this.$router.push({
        name: "icons",
        query: { iconsId: datas.userId, type: type, amountType: amountType },
      });
    },
    table_index(index) {
      return (this.params.page - 1) * this.params.pageSize + index + 1;
    },
    //
    getPartnerlevel() {
      partnerlevel().then((res) => {
        console.log(res);
        this.StatusOption=res.data.data
      });
    },
    //列表
    getList(e) {
      this.tableLoading = true;
      const datas = e;
      partnerList(datas)
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.tableData = res.data.data.data;
            this.page_totals = res.data.data.total;
            this.tableLoading = false;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((error) => {
          this.$message.error(error);
          this.tableLoading = false;
        });
    },
    // 查询
    searchFn() {
      this.params.page = 1;
      // this.params.userpone = this.params.userpone - 0;
      // console.log(this.params)
      this.getList(this.params);
    },
    //导出
    excelEvent() {
      let datas = { ...this.params };
      delete datas.page;
      delete datas.pageSize;
      excelExport(datas).then((res) => {
        exportfile(res);
      });
    },
    // 改变页面条数
    handleSizeChange(val) {
      // this.params.pageNum = 1;
      this.params.pageSize = val;
      this.getList(this.params);
    },
    // 选择页数
    handleCurrentChange(val) {
      this.params.page = val;
      this.getList(this.params);
    },
    // 路由跳转
    toRoutes(e, data) {
      const route = {
        name: e,
        query: { id: data.id },
      };
      this.$router.push(route);
    },
  },
};
</script>
<style scoped>
/* 分页 */
.pagesCon {
  height: 40px;
  margin-top: 20px;
}
.pagesCon > div {
  float: right;
}
</style>
